<template>
	<view class="">
		测试flex布局 子元素拉伸处理
	</view>
	
	<view class=" bg-yellow  height200 flex-container">
		<view class="item1 bg-blue padding-x-20">5元</view>
		<view class="item2 bg-red padding-x-20">15元</view>
		<view class="item3 padding-x-20">25元</view>
		
	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped> 
.flex-container{
	display: flex; 
	align-items: flex-end;
	
}

.item1{
	height: 100rpx;
	// align-self: center;
	align-items: center;
}


.height200{
	height:200rpx;
}

.bg-yellow{
	background-color: yellow;
}

.bg-blue{
	background-color: blue;
}

.bg-red{
	background-color: red;
}

.padding-x-20{
	padding-left: 20rpx;
	padding-right: 20rpx;
}
</style>
